<template>
  <view class="index">
    <view>
      姓名
    </view>
    <input
      v-model="name"
      type="text"
      placeholder="请输入姓名"
    >

    <view>性别</view>
    <view class="selector">
      <view
        v-for="item in genderOptions"
        :key="item.value"
        class="selector__item"
        :class="{ 'active': item.value === gender }"
        @tap="gender = item.value"
      >
        {{ item.label }}
      </view>
    </view>
  </view>
</template>

<script>
import './index.scss'

export default {
  data () {
    return {
      name: '',
      gender: '',

      genderOptions: [
        { label: '男', value: 1 },
        { label: '女', value: 2 },
      ]
    }
  }
}
</script>
